<script>
import ArticleList from "@/pages/index/components/articleList.vue"
import topicClassList from "@/pages/index/components/topicClassList.vue"
import { handleUrlParams, isSimpleApp } from "@/utils"
import request from "@/utils/request"

export default {
  name: "tabList",
  components: { topicClassList, ArticleList },
  data() {
    return {
      tabList: [{ value: "题库大全" }],
      currentTab: "题库大全",
    }
  },
  async created() {
    // 获取科目专区功能列表
    const data = await request({
      url: "homeFunction/getHomeSubjectList",
      showLoading: true,
      errorHandle: true,
    })
    for (let datum of data) {
      this.tabList.push({
        value: datum.subjectName + "专区",
        jumpType: "page",
        redirectUrl: handleUrlParams("/markingCampaign/pages/targetExamSection/index", {
          subjectCode: datum.subjectCode,
          subjectName: datum.subjectName,
          examIds: JSON.stringify(datum.examIds), // 考试ID列表
          classIds: JSON.stringify(datum.classIds), // 刷题分类ID列表
        }),
      })
    }
    // 不是精简版才显示以下菜单
    if (!(await isSimpleApp())) {
      this.tabList.push(
        ...[
          // { value: "校园热点" },
          // {
          //   value: "督学社团",
          //   jumpType: "page",
          //   redirectUrl:
          //     "/pages/imagePage/index?jumpType=jumpMiniProgram&appId=wxd45c635d754dbf59&jumpPath=pages%2Fdetail%2Fdetail%3Fqqdocurl%3Dhttps%3A%2F%2Fdocs.qq.com%2Faio%2FDTlN6VEx4akVDaHhR&urlList=%5B%22https%3A%2F%2Fkou.gdzmtech.com%3A1443%2Fapi-admin%2Ffile%2Fshuatiyu%2F2024%2F3%2F32139f089af141379f8cac55183b9e95.png%22%5D&btnText=领取校务行社团十大权益",
          // },
          {
            value: "可信留学",
            jumpType: "page",
            redirectUrl: "/pages/web-view/web-view?path=https%3A%2F%2Fxwx.gzzmedu.com%2Fstudy_abroad%2Fhome",
          },
        ],
      )
    }
  },
  methods: {
    // tab切换
    tabClick(item) {
      switch (item.jumpType) {
        //跳h5页面
        case "h5":
          uni.navigateTo({
            url: "/pages/web-view/web-view?path=" + encodeURIComponent(item.redirectUrl),
          })
          break
        //跳站内页面
        case "page":
          uni.navigateTo({
            url: item.redirectUrl,
          })
          break
        //不跳，切换标签
        default:
          this.currentTab = item.value
      }
    },
  },
}
</script>

<template>
  <view class="item-list">
    <view class="tab-list">
      <view
        class="tab-item"
        v-for="item in tabList"
        :key="item.value"
        :class="{ active: currentTab === item.value }"
        @click="tabClick(item)"
      >
        {{ item.value }}
      </view>
    </view>
    <!--			题目分类列表-->
    <topicClassList v-if="currentTab === '题库大全'"></topicClassList>
    <!--				资讯文章列表-->
    <article-list v-else-if="['校园热点'].includes(currentTab)" :type="currentTab" ref="articleList"></article-list>
  </view>
</template>

<style scoped lang="scss">
.item-list {
  background: white;
  padding: 30rpx;
  border-radius: 30rpx;
  .tab-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-y: auto;
    width: 100%;
    .tab-item {
      font-size: 30rpx;
      position: relative;
      min-width: max-content;
      flex-shrink: 0;
      margin-bottom: 20rpx;
      &:not(:last-child) {
        margin-right: 30rpx;
      }
      &.active {
        font-weight: bold;
        font-size: 36rpx;
      }
      &.active:after {
        position: absolute;
        content: "";
        left: 50%;
        transform: translateX(-50%);
        bottom: -6rpx;
        height: 6rpx;
        background: var(--theme-color);
        width: 60rpx;
        border-radius: 3rpx;
      }
    }
  }
}
</style>
